<form class="form-horizontal" name="templateForm">
  <!-- title-input -->
  <div class="form-group" ng-class="{ 'has-error': templateForm.template_title.$invalid }">
    <label for="template_title" class="col-sm-3 col-lg-2 control-label text-left">Title</label>
    <div class="col-sm-9 col-lg-10">
      <input type="text" class="form-control" name="template_title" ng-model="$ctrl.model.Title" placeholder="e.g. my-template" required auto-focus>
    </div>
  </div>
  <div class="form-group" ng-show="templateForm.template_title.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="templateForm.template_title.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !title-input -->
  <!-- description-input -->
  <div class="form-group" ng-class="{ 'has-error': templateForm.template_description.$invalid }">
    <label for="template_description" class="col-sm-3 col-lg-2 control-label text-left">Description</label>
    <div class="col-sm-9 col-lg-10">
      <input type="text" class="form-control" name="template_description" ng-model="$ctrl.model.Description" placeholder="e.g. template description..." required>
    </div>
  </div>
  <div class="form-group" ng-show="templateForm.template_description.$invalid">
    <div class="col-sm-12 small text-warning">
      <div ng-messages="templateForm.template_description.$error">
        <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
      </div>
    </div>
  </div>
  <!-- !description-input -->
  <div class="col-sm-12 form-section-title interactive" ng-click="$ctrl.state.collapseTemplate = !$ctrl.state.collapseTemplate">
    Template
    <span class="small space-left">
      <a ng-if="$ctrl.state.collapseTemplate"><i class="fa fa-plus" aria-hidden="true"></i> expand</a>
      <a ng-if="!$ctrl.state.collapseTemplate"><i class="fa fa-minus" aria-hidden="true"></i> collapse</a>
    </span>
  </div>
  <!-- template-details -->
  <div uib-collapse="$ctrl.state.collapseTemplate">

    <div ng-if="$ctrl.showTypeSelector">
      <div class="form-group"></div>
      <div class="form-group" style="margin-bottom: 0">
        <div class="boxselector_wrapper">
          <div>
            <input type="radio" id="template_container" ng-model="$ctrl.model.Type" ng-value="1">
            <label for="template_container">
              <div class="boxselector_header">
                <i class="fa fa-server" aria-hidden="true" style="margin-right: 2px;"></i>
                Container
              </div>
              <p>Container template</p>
            </label>
          </div>
          <div>
            <input type="radio" id="template_swarm_stack" ng-model="$ctrl.model.Type" ng-value="2">
            <label for="template_swarm_stack">
              <div class="boxselector_header">
                <i class="fa fa-th-list" aria-hidden="true" style="margin-right: 2px;"></i>
                Swarm stack
              </div>
              <p>Stack template (Swarm)</p>
            </label>
          </div>
          <div>
            <input type="radio" id="template_compose_stack" ng-model="$ctrl.model.Type" ng-value="3">
            <label for="template_compose_stack">
              <div class="boxselector_header">
                <i class="fa fa-th-list" aria-hidden="true" style="margin-right: 2px;"></i>
                Compose stack
              </div>
              <p>Stack template (Compose)</p>
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- name -->
    <div class="form-group">
      <label for="template_name" class="col-sm-3 col-lg-2 control-label text-left">
        Name
        <portainer-tooltip position="bottom" message="Default name that will be associated to the template"></portainer-tooltip>
      </label>
      <div class="col-sm-9 col-lg-10">
        <input type="text" class="form-control" name="template_name" ng-model="$ctrl.model.Name" placeholder="e.g. myApp">
      </div>
    </div>
    <!-- !name -->
    <!-- logo -->
    <div class="form-group">
      <label for="template_logo" class="col-sm-3 col-lg-2 control-label text-left">
        Logo URL
        <portainer-tooltip position="bottom" message="Recommended size: 60x60"></portainer-tooltip>
      </label>
      <div class="col-sm-9 col-lg-10">
        <input type="text" class="form-control" name="template_logo" ng-model="$ctrl.model.Logo" placeholder="e.g. https://portainer.io/images/logos/nginx.png">
      </div>
    </div>
    <!-- !logo -->
    <!-- note -->
    <div class="form-group">
      <label for="template_note" class="col-sm-3 col-lg-2 control-label text-left">
        Note
        <portainer-tooltip position="bottom" message="Usage / extra information about the template. Supports HTML."></portainer-tooltip>
      </label>
      <div class="col-sm-9 col-lg-10">
        <textarea class="form-control" name="template_note" ng-model="$ctrl.model.Note" placeholder='You can use this field to specify extra information. <br/> It supports <b>HTML</b>.'></textarea>
      </div>
    </div>
    <!-- !note -->
    <!-- platform -->
    <div class="form-group">
      <label for="template_platform" class="col-sm-3 col-lg-2 control-label text-left">
        Platform
      </label>
      <div class="col-sm-9 col-lg-10">
        <select class="form-control" name="template_platform" ng-model="$ctrl.model.Platform">
          <option value="">Multi-platform</option>
          <option value="linux">Linux</option>
          <option value="windows">Windows</option>
        </select>
      </div>
    </div>
    <!-- !platform -->
    <!-- categories -->
    <div class="form-group">
      <label for="template_categories" class="col-sm-3 col-lg-2 control-label text-left">
        Categories
      </label>
      <div class="col-sm-9 col-lg-10">
        <ui-select multiple tagging tagging-label="(new category)" ng-model="$ctrl.model.Categories" sortable="true" style="width: 300px;" title="Choose a category">
          <ui-select-match placeholder="Select categories...">{{ $item }}</ui-select-match>
          <ui-select-choices repeat="category in $ctrl.categories | filter:$select.search">
            {{ category }}
          </ui-select-choices>
        </ui-select>
      </div>
    </div>
    <!-- !categories -->
    <!-- administrator-only -->
    <div class="form-group">
      <div class="col-sm-12">
        <label for="tls" class="control-label text-left">
          Administrator template
          <portainer-tooltip position="bottom" message="Should this template be only available to administrator users."></portainer-tooltip>
        </label>
        <label class="switch" style="margin-left: 20px;">
          <input type="checkbox" ng-model="$ctrl.model.AdministratorOnly"><i></i>
        </label>
      </div>
    </div>
    <!-- administrator-only -->
  </div>
  <!-- !template-details -->
  <div ng-if="$ctrl.model.Type === 2 || $ctrl.model.Type === 3">
    <div class="col-sm-12 form-section-title interactive" ng-click="$ctrl.state.collapseStack = !$ctrl.state.collapseStack">
      Stack
      <span class="small space-left">
        <a ng-if="$ctrl.state.collapseStack"><i class="fa fa-plus" aria-hidden="true"></i> expand</a>
        <a ng-if="!$ctrl.state.collapseStack"><i class="fa fa-minus" aria-hidden="true"></i> collapse</a>
      </span>
    </div>
    <!-- stack-details -->
    <div uib-collapse="$ctrl.state.collapseStack">
      <!-- repository-url -->
      <div class="form-group" ng-class="{ 'has-error': templateForm.template_repository_url.$invalid }">
        <label for="template_repository_url" class="col-sm-3 col-lg-2 control-label text-left">Repository URL</label>
        <div class="col-sm-9 col-lg-10">
          <input type="text" class="form-control" name="template_repository_url" ng-model="$ctrl.model.Repository.url" placeholder="https://github.com/portainer/portainer-compose" required>
        </div>
      </div>
      <div class="form-group" ng-show="templateForm.template_repository_url.$invalid">
        <div class="col-sm-12 small text-warning">
          <div ng-messages="templateForm.template_repository_url.$error">
            <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
          </div>
        </div>
      </div>
      <!-- !repository-url -->
      <!-- composefile-path -->
      <div class="form-group">
        <label for="template_repository_path" class="col-sm-3 col-lg-2 control-label text-left">
          Compose file path
        </label>
        <div class="col-sm-9 col-lg-10">
          <input type="text" class="form-control" name="template_repository_path" ng-model="$ctrl.model.Repository.stackfile" placeholder='docker-compose.yml'>
        </div>
      </div>
      <!-- !composefile-path -->
    </div>
    <!-- !stack-details -->
  </div>
  <div ng-if="$ctrl.model.Type === 1">
    <div class="col-sm-12 form-section-title interactive" ng-click="$ctrl.state.collapseContainer = !$ctrl.state.collapseContainer">
      Container
      <span class="small space-left">
        <a ng-if="$ctrl.state.collapseContainer"><i class="fa fa-plus" aria-hidden="true"></i> expand</a>
        <a ng-if="!$ctrl.state.collapseContainer"><i class="fa fa-minus" aria-hidden="true"></i> collapse</a>
      </span>
    </div>
    <!-- container-details -->
    <div uib-collapse="$ctrl.state.collapseContainer">
      <por-image-registry
        image="$ctrl.model.Image"
        registry="$ctrl.model.Registry"
        auto-complete="true"
        label-class="col-sm-2" input-class="col-sm-10 col-md-4"
      ></por-image-registry>
      <!-- command -->
      <div class="form-group">
        <label for="template_command" class="col-sm-3 col-lg-2 control-label text-left">
          Command
          <portainer-tooltip position="bottom" message="The command to run in the container. If not specified, the container will use the default command specified in its Dockerfile."></portainer-tooltip>
        </label>
        <div class="col-sm-9 col-lg-10">
          <input type="text" class="form-control" name="template_command" ng-model="$ctrl.model.Command" placeholder='/bin/bash -c \"echo hello\" && exit 777'>
        </div>
      </div>
      <!-- !command -->
      <!-- hostname -->
      <div class="form-group">
        <label for="template_hostname" class="col-sm-3 col-lg-2 control-label text-left">
          Hostname
          <portainer-tooltip position="bottom" message="Set the hostname of the container. Will use Docker default if not specified."></portainer-tooltip>
        </label>
        <div class="col-sm-9 col-lg-10">
          <input type="text" class="form-control" name="template_hostname" ng-model="$ctrl.model.Hostname" placeholder='mycontainername'>
        </div>
      </div>
      <!-- !hostname -->
      <!-- network -->
      <div class="form-group">
        <label for="template_network" class="col-sm-3 col-lg-2 control-label text-left">
          Network
        </label>
        <div class="col-sm-10">
          <select class="form-control" ng-options="net.Name for net in $ctrl.networks" ng-model="$ctrl.model.Network">
            <option disabled hidden value="">Select a network</option>
          </select>
        </div>
      </div>
      <!-- !network -->
      <!-- port-mapping -->
      <div class="form-group" >
        <div class="col-sm-12" style="margin-top: 5px;">
          <label class="control-label text-left">Port mapping</label>
          <span class="label label-default interactive" style="margin-left: 10px;" ng-click="$ctrl.addPortBinding()">
            <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
          </span>
        </div>
        <div class="col-sm-12" style="margin-top: 10px" ng-if="$ctrl.model.Ports.length > 0">
          <span class="small text-muted">Portainer will automatically assign a port if you leave the host port empty.</span>
        </div>
        <!-- port-mapping-input-list -->
        <div class="col-sm-12">
          <div class="col-sm-12 form-inline" style="margin-top: 10px;">
            <div ng-repeat="portBinding in $ctrl.model.Ports" style="margin-top: 2px;">
              <!-- host-port -->
              <div class="input-group col-sm-4 input-group-sm">
                <span class="input-group-addon">host</span>
                <input type="text" class="form-control" ng-model="portBinding.hostPort" placeholder="e.g. 80 or 1.2.3.4:80 (optional)">
              </div>
              <!-- !host-port -->
              <span style="margin: 0 10px 0 10px;">
                <i class="fa fa-long-arrow-alt-right" aria-hidden="true"></i>
              </span>
              <!-- container-port -->
              <div class="input-group col-sm-4 input-group-sm">
                <span class="input-group-addon">container</span>
                <input type="text" class="form-control" ng-model="portBinding.containerPort" placeholder="e.g. 80">
              </div>
              <!-- !container-port -->
              <!-- protocol-actions -->
              <div class="input-group col-sm-3 input-group-sm">
                <div class="btn-group btn-group-sm">
                  <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'tcp'">TCP</label>
                  <label class="btn btn-primary" ng-model="portBinding.protocol" uib-btn-radio="'udp'">UDP</label>
                </div>
                <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removePortBinding($index)">
                  <i class="fa fa-trash" aria-hidden="true"></i>
                </button>
              </div>
              <!-- !protocol-actions -->
            </div>
          </div>
        </div>
        <!-- !port-mapping-input-list -->
      </div>
      <!-- !port-mapping -->
      <!-- volumes -->
      <div class="form-group" >
        <div class="col-sm-12" style="margin-top: 5px;">
          <label class="control-label text-left">Volume mapping</label>
          <span class="label label-default interactive" style="margin-left: 10px;" ng-click="$ctrl.addVolume()">
            <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional volume
          </span>
        </div>
        <div class="col-sm-12" style="margin-top: 10px" ng-if="$ctrl.model.Volumes.length > 0">
          <span class="small text-muted">Portainer will automatically create and map a local volume when using the <b>auto</b> option.</span>
        </div>
        <div ng-repeat="volume in $ctrl.model.Volumes">
          <div class="col-sm-12" style="margin-top: 10px;">
            <!-- volume-line1 -->
            <div class="col-sm-12 form-inline">
              <!-- container-path -->
              <div class="input-group input-group-sm col-sm-6">
                <span class="input-group-addon">container</span>
                <input type="text" class="form-control" ng-model="volume.container" placeholder="e.g. /path/in/container">
              </div>
              <!-- !container-path -->
              <!-- volume-type -->
              <div class="input-group col-sm-5" style="margin-left: 5px;">
                <div class="btn-group btn-group-sm">
                  <label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'auto'" ng-click="volume.bind = ''">Auto</label>
                  <label class="btn btn-primary" ng-model="volume.type" uib-btn-radio="'bind'" ng-click="volume.bind = ''">Bind</label>
                </div>
                <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeVolume($index)">
                  <i class="fa fa-trash" aria-hidden="true"></i>
                </button>
              </div>
              <!-- !volume-type -->
            </div>
            <!-- !volume-line1 -->
            <!-- volume-line2 -->
            <div class="col-sm-12 form-inline" style="margin-top: 5px;" ng-if="volume.type !== 'auto'">
              <i class="fa fa-long-arrow-alt-right" aria-hidden="true"></i>
              <!-- bind -->
              <div class="input-group input-group-sm col-sm-6" ng-if="volume.type === 'bind'">
                <span class="input-group-addon">host</span>
                <input type="text" class="form-control" ng-model="volume.bind" placeholder="e.g. /path/on/host">
              </div>
              <!-- !bind -->
              <!-- read-only -->
              <div class="input-group input-group-sm col-sm-5" style="margin-left: 5px;">
                <div class="btn-group btn-group-sm">
                  <label class="btn btn-primary" ng-model="volume.readonly" uib-btn-radio="false">Writable</label>
                  <label class="btn btn-primary" ng-model="volume.readonly" uib-btn-radio="true">Read-only</label>
                </div>
              </div>
              <!-- !read-only -->
            </div>
            <!-- !volume-line2 -->
          </div>
        </div>
      </div>
      <!-- !volumes -->
      <!-- labels -->
      <div class="form-group" >
        <div class="col-sm-12" style="margin-top: 5px;">
          <label class="control-label text-left">Labels</label>
          <span class="label label-default interactive" style="margin-left: 10px;" ng-click="$ctrl.addLabel()">
            <i class="fa fa-plus-circle" aria-hidden="true"></i> add label
          </span>
        </div>
        <!-- labels-input-list -->
        <div class="col-sm-12">
          <div class="col-sm-12 form-inline" style="margin-top: 10px;">
            <div ng-repeat="label in $ctrl.model.Labels" style="margin-top: 2px;">
              <div class="input-group col-sm-5 input-group-sm">
                <span class="input-group-addon">name</span>
                <input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo">
              </div>
              <div class="input-group col-sm-5 input-group-sm">
                <span class="input-group-addon">value</span>
                <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar">
              </div>
              <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeLabel($index)">
                <i class="fa fa-trash" aria-hidden="true"></i>
              </button>
            </div>
          </div>
        </div>
        <!-- !labels-input-list -->
      </div>
      <!-- !labels -->
      <!-- restart_policy -->
      <div class="form-group">
        <label for="template_restart_policy" class="col-sm-3 col-lg-2 control-label text-left">
          Restart policy
        </label>
        <div class="col-sm-9 col-lg-10">
          <select class="form-control" name="template_platform" ng-model="$ctrl.model.RestartPolicy">
            <option value="always">Always</option>
            <option value="unless-stopped">Unless stopped</option>
            <option value="on-failure">On failure</option>
            <option value="no">None</option>
          </select>
        </div>
      </div>
      <!-- !restart_policy -->
      <!-- privileged-mode -->
      <div class="form-group">
        <div class="col-sm-12">
          <label for="tls" class="control-label text-left">
            Privileged mode
            <portainer-tooltip position="bottom" message="Start the container in privileged mode."></portainer-tooltip>
          </label>
          <label class="switch" style="margin-left: 20px;">
            <input type="checkbox" ng-model="$ctrl.model.Privileged"><i></i>
          </label>
        </div>
      </div>
      <!-- !privileged-mode -->
      <!-- interactive-mode -->
      <div class="form-group">
        <div class="col-sm-12">
          <label for="tls" class="control-label text-left">
            Interactive mode
            <portainer-tooltip position="bottom" message="Start the container in foreground (equivalent of -i -t flags)."></portainer-tooltip>
          </label>
          <label class="switch" style="margin-left: 20px;">
            <input type="checkbox" ng-model="$ctrl.model.Interactive"><i></i>
          </label>
        </div>
      </div>
      <!-- !interactive-mode -->
    </div>
    <!-- !container-details -->
  </div>
  <div class="col-sm-12 form-section-title interactive" ng-click="$ctrl.state.collapseEnv = !$ctrl.state.collapseEnv">
    Environment
    <span class="small space-left">
      <a ng-if="$ctrl.state.collapseEnv"><i class="fa fa-plus" aria-hidden="true"></i> expand</a>
      <a ng-if="!$ctrl.state.collapseEnv"><i class="fa fa-minus" aria-hidden="true"></i> collapse</a>
    </span>
  </div>
  <!-- environment-details -->
  <div uib-collapse="$ctrl.state.collapseEnv">
    <!-- env -->
    <div class="form-group" >
      <div class="col-sm-12" style="margin-top: 5px;">
        <label class="control-label text-left">Environment variables</label>
        <span class="label label-default interactive" style="margin-left: 10px;" ng-click="$ctrl.addEnvVar()">
          <i class="fa fa-plus-circle" aria-hidden="true"></i> add variable
        </span>
      </div>
      <!-- env-var-list -->
      <div style="margin-top: 10px;">
        <div class="col-sm-12 template-envvar" ng-repeat="var in $ctrl.model.Env" style="margin-top: 10px;">
          <div class="form-group"></div>
          <div class="form-group" style="margin-bottom: 0">
            <div class="boxselector_wrapper">
              <div>
                <input type="radio" id="preset_var_{{$index}}" ng-model="var.type" ng-value="1" ng-change="$ctrl.changeEnvVarType(var)">
                <label for="preset_var_{{$index}}">
                  <div class="boxselector_header">
                    <i class="fa fa-user-slash" aria-hidden="true" style="margin-right: 2px;"></i>
                    Preset
                  </div>
                  <p>Preset variable</p>
                </label>
              </div>
              <div>
                <input type="radio" id="text_var_{{$index}}" ng-model="var.type" ng-value="2" ng-change="$ctrl.changeEnvVarType(var)">
                <label for="text_var_{{$index}}">
                  <div class="boxselector_header">
                    <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
                    Text
                  </div>
                  <p>Free text value</p>
                </label>
              </div>
              <div>
                <input type="radio" id="select_var_{{$index}}" ng-model="var.type" ng-value="3">
                <label for="select_var_{{$index}}">
                  <div class="boxselector_header">
                    <i class="fa fa-list-ol" aria-hidden="true" style="margin-right: 2px;"></i>
                    Select
                  </div>
                  <p>Choose value from list</p>
                </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label text-left">
              Name
            </label>
            <div class="col-sm-8">
              <input type="text" class="form-control" ng-model="var.name" placeholder="env_var">
            </div>
            <div class="col-sm-2">
              <button class="btn btn-sm btn-danger space-left" type="button" ng-click="$ctrl.removeEnvVar($index)">
                <i class="fa fa-trash" aria-hidden="true"></i>
              </button>
            </div>
          </div>
          <div ng-if="var.type == 2 || var.type == 3">
            <div  class="form-group">
              <label class="col-sm-2 control-label text-left">
                Label
              </label>
              <div class="col-sm-10">
                <input type="text" class="form-control" ng-model="var.label" placeholder="Choose a label">
              </div>
            </div>
            <div  class="form-group">
              <label class="col-sm-2 control-label text-left" style="margin-top: 2px;">
                Description
              </label>
              <div class="col-sm-10" style="margin-top: 2px;">
                <input type="text" class="form-control" ng-model="var.description" placeholder="Tooltip">
              </div>
            </div>
          </div>
          <div class="form-group" ng-if="var.type === 1 || var.type === 2">
            <label class="col-sm-2 control-label text-left">
              Default value
            </label>
            <div class="col-sm-10">
              <input type="text" class="form-control" ng-model="var.default" placeholder="default_value">
            </div>
          </div>
          <div ng-if="var.type === 3" style="margin-bottom: 5px;" class="form-group">
            <div class="col-sm-12" style="margin-top: 5px;">
              <label class="control-label text-left">Values</label>
              <span class="label label-default interactive" style="margin-left: 10px;" ng-click="$ctrl.addEnvVarValue(var)">
                <i class="fa fa-plus-circle" aria-hidden="true"></i> add allowed value
              </span>
            </div>
            <!-- envvar-values-list -->
            <div class="col-sm-12">
              <div class="col-sm-12 form-inline" style="margin-top: 10px;">
                <div ng-repeat="val in var.select" style="margin-top: 2px;">
                  <div class="input-group col-sm-5 input-group-sm">
                    <span class="input-group-addon">name</span>
                    <input type="text" class="form-control" ng-model="val.text" placeholder="Yes, I agree">
                  </div>
                  <div class="input-group col-sm-5 input-group-sm">
                    <span class="input-group-addon">value</span>
                    <input type="text" class="form-control" ng-model="val.value" placeholder="Y">
                  </div>
                  <div class="input-group col-sm-1 input-group-sm">
                    <button class="btn btn-sm btn-danger" type="button" ng-click="$ctrl.removeEnvVarValue(var, $index)">
                      <i class="fa fa-trash" aria-hidden="true"></i>
                    </button>
                    <input style="margin-left: 5px;" type="checkbox" ng-model="val.default" id="val_default_{{$index}}"><label for="val_default_{{$index}}" class="space-left">Default</label>
                  </div>
                </div>
              </div>
            </div>
            <!-- envvar-values-list -->
          </div>
          <div class="col-sm-12" ng-show="$ctrl.model.Env.length > 1">
            <div class="line-separator"></div>
          </div>
        </div>
      </div>
      <!-- !env-var-list -->
    </div>
    <!-- !env -->
  </div>
  <!-- !environment-details -->
  <!-- actions -->
  <div class="col-sm-12 form-section-title">
    Actions
  </div>
  <div class="form-group">
    <div class="col-sm-12">
      <button type="button" class="btn btn-primary btn-sm" ng-click="$ctrl.formAction()" ng-disabled="$ctrl.actionInProgress || !templateForm.$valid" button-spinner="$ctrl.actionInProgress">
        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
        <span ng-show="$ctrl.actionInProgress">In progress...</span>
      </button>
    </div>
  </div>
  <!-- !actions -->
</form>
